<template>
  <div class="income1">
    <div class="naviga">&nbsp;&nbsp;{{$store.state.marketName}}&nbsp;>&nbsp;投资收益预设</div>
    <div class="top-bar">
      <img src="../../images/wicon.png"/>
      <p>数据来源于<span>淘宝/天猫</span>平台</p>
      <p>开通精确数据服务</p>
    </div>
    <div class="second-bar">
      <div class=" margin-top1" style="width: 97.65%;margin: auto;background: #fff;">
        <div style="width: 75%;float: left">
          <span style="font-size: 14px;margin-left: 20px;float:left" >已选型号</span>
          <ul
          style="margin-left: 5px;float:left"
          v-for="item,index in tags1"
          :key="index"
          v-if="index<5"
          >
            <p :style="{background:item.color}">
              <span style="line-height:14px;padding:0 10px">{{item.brand}}</span><br/>
              <span style="line-height:14px;padding:0 10px">{{item.code}}</span>
            </p>
          </ul>
          <el-popover
            placement="bottom"
            width="400"
            trigger="click">
              <ul

                style="margin-left: 5px;float:left;margin-top:5px;"
                v-for="item,index in tags2"
                :key="index"
                v-if='item'
                >
                <p :style="{background:item.color}" style="text-align:center;padding:5px;border-radius: 5px;">
                  <span style="line-height:14px;padding:0 5px">{{item.brand}}</span><br/>
                  <span style="line-height:14px;padding:0 5px">{{item.code}}</span>
                </p>
              </ul>
              <el-button slot="reference" style="margin-left:10px;background:none;border:none">更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
          </el-popover>
        </div>
         <!-- <div style="width: 21%;float: right;margin-right:1%">
          <div class="pull-right" style="width: 100%">
              <span class="demonstration" style="float: left;width: 30%;font-size: 14px;padding:0;line-height:50px;">选择日期</span>
              <ul class="data-month">
                  <el-date-picker class='data-picker' :value="startMonth" type="month" @input="startChange"   placeholder="选择起始年月"></el-date-picker>
                  <span style="width:10%;">至</span>
                  <el-date-picker :value="endMonth" type="month" @input="endChange"  placeholder="选择结束年月"></el-date-picker>
                  <img style="width:16px;height:16px;margin-top:17px;"  src="../../images/clender.png"/>
              </ul>
          </div>
        </div> -->
      </div>
    </div>
    <div class="col-xs-12 border-r margin-top">
      <div class="col-xs-12 bar-wrap">
        <div class='bar-btn' v-if="keysSub!=0">
          <p :style="{
              background:labelClick=='销售额'?'#d9effc':'#fff',
              border:labelClick=='销售额'?'none':'1px solid #cccccc',
              color:labelClick=='销售额'?'#03a9f4':'#666666'
              }"
              @click='count("销售额")'>销售额</p>
          <p
              :style="{
              background:labelClick=='销售量'?'#d9effc':'#fff',
              border:labelClick=='销售量'?'none':'1px solid #cccccc',
              color:labelClick=='销售量'?'#03a9f4':'#666666'
              }"
            @click='count("销售量")'>销售量</p>
        </div>
        <!-- <div id="myChart" v-if='countShow' style="width: 99%;height: 300px"></div> -->
        <chart v-if="keysSub!=0" :options="chartOption" :auto-resize="true" style="width: 99%;height: 300px" ></chart>
        <h3 v-if="keysSub==0" style="width: 99%;height: 300px;text-align:center;line-height:300px;">暂无数据</h3>
      </div>
      <div class="market-share">
        <ul>
          <p style="line-height:40px;height:40px"></p>
          <p>市场占有率排名前五</p>
        </ul>
        <div>
          <ul class="catogry-arr">
            <p v-for="item,index in categoryArr">{{item}}</p>
          </ul>
          <ul class="catogry-arr">
            <p v-for="item,index in marketShareArr">{{item}}%</p>
          </ul>
        </div>

      </div>
    </div>
    <div class="col-xs-12 border-r margin-top" style="padding-left: 0;padding-right: 0;padding-bottom:40px;">
      <div class="sub-banner">市占率目标（三年计划）</div>
      <div class="col-xs-12 margin-top">
        <div class="pull-right">
          <span>注:ROE计算参考</span>
          <a :href="downloadUrl" class="org-link" download>模板下载</a>
          <span @click="save()">保存</span>
        </div>
      </div>
      <div  style="width:100%;height:340px" class="clearfix">
        <div class=" title">
          <div >
            <div>年份(年)</div>
            <div>市占率(%)</div>
            <div>销售额(元)</div>
            <div>销售量(件)</div>
            <div>毛利率(%)</div>
          </div>
        </div>
        <!-- <div class="title1" v-for="n,index in list"  :key="index">
          <div><el-input  placeholder="请输入内容" v-model="n.targetYear" ></el-input></div>
          <div><el-input  placeholder="请输入内容" v-model="n.marketShare"></el-input></div>
          <div><el-input  placeholder="请输入内容" v-model="n.salesAmount"></el-input></div>
          <div><el-input  placeholder="请输入内容" v-model="n.salesCount"></el-input></div>
          <div><el-input  placeholder="请输入内容" v-model="n.grossProfitMargin"></el-input></div>
      </div> -->
       <div  v-for="n,index in list">
          <el-form class="title1"  :model="n" :ref="'ruleForm'+index"   :key="index"  :rules="rules2">
              <el-form-item
              prop="targetYear">
                <el-input  v-model="n.targetYear"></el-input>
              </el-form-item>
              <el-form-item
              prop="marketShare">
                <el-input  v-model="n.marketShare"></el-input>
              </el-form-item>
              <el-form-item
              prop="salesAmount">
                <el-input  v-model="n.salesAmount"></el-input>
              </el-form-item>
              <el-form-item
              prop="salesCount">
                <el-input  v-model="n.salesCount"></el-input>
              </el-form-item>
              <el-form-item
              prop="grossProfitMargin">
                <el-input  v-model="n.grossProfitMargin"></el-input>
              </el-form-item>
          </el-form>
       </div>
      </div>

  </div>
  </div>
</template>

<script>
export default {
  data() {
    //年份验证
    let validateYears = (rule, value, callback) => {
      console.log(rule, value);
      let yearReg = /^([0-2]\d{3})$/; //年份正则

      if (!value) {
        callback(new Error("年份不能为空"));
      } else if (!yearReg.test(value)) {
        callback(new Error("请输入正确的年份,如：XXXX"));
      } else {
        callback();
      }
    };
    //市占率验证
    let validateShare = (rule, value, callback) => {
      console.log(rule, value);

      let percentReg = /^100$|^(\d|[1-9]\d)(\.\d+)*$/; //百分比正则
      if (!value) {
        callback(new Error("市占率不能为空"));
      } else if (!percentReg.test(value)) {
        callback(new Error("请输入小于100的正数"));
      } else {
        callback();
      }
    };
    //销售额验证
    let validateAmount = (rule, value, callback) => {
      console.log(rule, value);

      let integerReg =  /.*\..*/; //整数正则
      if (!value) {
        callback(new Error("销售额不能为空"));
      }else if (integerReg.test(value) || value>=1000000000) {
        callback(new Error("请输入小于1000000000整数"));
      } else {
        callback();
      }
    };
    //销售量验证
    let validateCount = (rule, value, callback) => {
      console.log(rule, value);

      let integerReg = /^[+]{0,1}(\d+)$/; //整数正则
      if (!value) {
        callback(new Error("销售量不能为空"));
      } else if (value >=100000000000) {
        callback(new Error("请输入小于100000000000的正数"));
      } else {
        callback();
      }
    };
    //毛利率验证
    let validateProfitMargin = (rule, value, callback) => {
      console.log(rule, value);
      let percentReg = /^100$|^(\d|[1-9]\d)(\.\d+)*$/; //百分比正则
      if (!value) {
        callback(new Error("毛利率不能为空"));
      } else if (!percentReg.test(value)) {
        callback(new Error("请输入小于100的正数"));
      } else {
        callback();
      }
    };
    return {
      canSbmt: true,
      rules2: {
        targetYear: [{ validator: validateYears, trigger: "blur" }],
        marketShare: [{ validator: validateShare, trigger: "blur" }],
        salesAmount: [{ validator: validateAmount, trigger: "blur" }],
        salesCount: [{ validator: validateCount, trigger: "blur" }],
        grossProfitMargin: [
          { validator: validateProfitMargin, trigger: "blur" }
        ]
      },
      focus: true,
      chartOption: {},
      value: "",
      value8: "",
      countShow: true,
      options: [],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普"
        }
      ],
      myChart: {},
      list: [],
      marketId: "",
      allCountData: [],
      allSalesRatio: [],
      categoryArr: [],
      marketShareArr: [],
      //  tags1: [],
      tags2: [],
      colorArr: ["#ffe6ea", "#eae9fa", "#d8f3f7", "#fefbe2", "#e0f2fd"],
      endMonth: "",
      startMonth: "",
      labelClick: "销售额",
      datas: [],
      subMarketData: "",
      keysSub: ""
    };
  },
  computed: {
    tags1() {
      let dataTags1 = this.$store.state.brandArr;
      let objTags1 = {};
      for (var a in dataTags1) {
        let name = dataTags1[a].brand;
        objTags1[name] = { name };
        Object.keys(objTags1).map((key, i) => {
          console.log(key, i);
          if (dataTags1[a].brand == key) {
            dataTags1[a].color = this.colorArr[i];
          }
        });
      }
      this.tags2 = dataTags1.slice("5");
      return dataTags1;
    },
    // tags2(){

    // }
    downloadUrl: function() {
      return "/file/download?fileName=ROE计算参考附件.xlsx";
    }
  },

  created() {
    //日期
    let date = new Date();
    let mounth = date.getMonth() + 1;
    let year = date.getFullYear();
    let year1 = date.getFullYear() - 10;
    this.endMonth = `${year}-${mounth}`;
    this.startMonth = `${year1}-${mounth}`;
    this.marketId = this.$store.state.id;
    this.getPPList();
    for (let i = 0; i < 3; i++) {
      this.list.push({
        marketId: this.marketId,
        marketShare: "",
        salesAmount: "",
        salesCount: "",
        grossProfitMargin: "",
        targetYear: "",
        creator: this.$store.state.user.id,
        startMonth: "",
        endMonth: ""
      });
    }
    this.getSZL(); //获取市占率
    this.getEarnEchart(() => {
      let data = this.datas;
      console.log(data);
      this.getArr(
        data,
        "salesAmount",
        { type: "bar", barWidth: "15px" },
        () => {
          this.drawLine();
        }
      );
      this.getArr(
        data,
        "salesAmountRatio",
        {
          type: "line",
          smooth: true,
          yAxisIndex: 1
        },
        () => {
          console.log();
          this.drawLine();
        }
      );
    });
  },
  methods: {
    //改变开始年月
    /*startChange(e) {
      let t = e.getFullYear() + "-" + (e.getMonth() + 1);
      let data = new Date(e).getTime();
      let endData = new Date(this.endMonth).getTime();
      console.log(data, endData, data - endData);
      if (data > endData) {
        this.$message({
          message: "开始时间不能大于结束日期",
          type: "warning"
        });
        return;
      }
      this.startMonth = t;
      this.getPPList();
      this.getEarnEchart(() => {
        let data = this.datas;
        this.getArr(
          data,
          "salesAmount",
          { type: "bar", barWidth: "15px" },
          () => {
            this.drawLine();

          }
        );
        this.getArr(
          data,
          "salesAmountRatio",
          {
            type: "line",
            smooth: true,
            yAxisIndex: 1
          },
          () => {
            console.log();
            this.drawLine();
          }
        );
      });
    },*/
    //改变结束年月
    /*endChange(e) {
      let t = e.getFullYear() + "-" + (e.getMonth() + 1);
      let data = new Date(e);
      let startData = new Date(this.startMonth);
      if (data < startData) {
        this.$message({
          message: "结束时间不能小于开始时间",
          type: "warning"
        });
        return;
      }
      this.endMonth = t;
      this.getPPList();
      this.getEarnEchart(() => {
        let data = this.datas;
        this.getArr(
          data,
          "salesAmount",
          { type: "bar", barWidth: "15px" },
          () => {
            this.drawLine();
          }
        );
        this.getArr(
          data,
          "salesAmountRatio",
          {
            type: "line",
            smooth: true,
            yAxisIndex: 1
          },
          () => {
            console.log();
            this.drawLine();
          }
        );
      });
    },*/
    //获取最近一个月的时间段
    /*getPreMonth(date) {
      var arr = date.split("-");
      var year = arr[0]; //获取当前日期的年份

      var month = arr[1]; //获取当前日期的月份
      var day = arr[2]; //获取当前日期的日
      var days = new Date(year, month, 0);
      days = days.getDate(); //获取当前日期中月的天数
      var year2 = year;
      var month2 = parseInt(month) - 1;
      if (month2 == 0) {
        year2 = parseInt(year2) - 1;
        month2 = 12;
      }
      var t2 = year2 + "-" + month2;
      return t2;
    },*/
    //
    getArr(data, key, opction, callback) {
      console.log(data);
      console.log(opction);
      let obj = {};
      let arr = [];
      let yearArr = [];
      let pBrandArr = [];
      // let arr = [];
      console.log(data);
      for (let i in data) {
        console.log(data[i]);
        yearArr.push(i);
        for (let a in data[i]) {
          console.log(data[i][a]);
          let item = data[i][a];
          if (!obj[item.brand]) {
            obj[item.brand] = [];
          }

          obj[item.brand].push(item[key]);
        }
      }
      for (let i in obj) {
        pBrandArr.push(i);
        for (let a in obj[i]) {
          if (obj[i][a] == null) {
            obj[i][a] = "";
          }
        }
        arr.push({
          name: i,
          ...opction,
          data: obj[i]
        });
      }
      console.log(arr, yearArr, pBrandArr);
      if (opction.type === "line" && key == "salesCountRatio") {
        this.allSalesRatio = [arr, yearArr, pBrandArr];
      } else if (opction.type === "bar" && key == "salesCount") {
        this.allCountData = [arr, yearArr, pBrandArr];
      } else if (opction.type === "line" && key == "salesAmountRatio") {
        this.allSalesRatio = [arr, yearArr, pBrandArr];
      } else if (opction.type === "bar" && key == "salesAmount") {
        this.allCountData = [arr, yearArr, pBrandArr];
      }
      callback();
    },
    //获取投资预算收益图
    getEarnEchart(callback) {
      console.log(67890);
      this.$http
        .post(this.GLOBAL.host, {
          method: "getSubMarketSalesData",
          query: {
            marketId: this.marketId,
            startTime: this.startMonth,
            endTime: this.endMonth
          }
        })
        .then(res => {
          console.log(res.data.code);
          if (res.data.code === 200) {
            let keysSubNum = Object.keys(res.data.data).length;
            this.keysSub = keysSubNum;
            if (Object.keys(res.data.data).length == 0) {
              return;
            }
            this.datas = res.data.data;

            callback();
          }
        })
        .catch(error => {});
    },
    //点击销售量
    count(e) {
      console.log(e);
      this.labelClick = e;
      if (e === "销售量") {
        let data = this.datas;
        console.log(data);
        this.getArr(
          data,
          "salesCount",
          { type: "bar", barWidth: "15px" },
          () => {
            console.log();
            this.drawLine();
          }
        );
        this.getArr(
          data,
          "salesCountRatio",
          {
            type: "line",
            smooth: true,
            yAxisIndex: 1
          },
          () => {
            console.log();
            this.drawLine();
          }
        );
      } else if (e === "销售额") {
        let data = this.datas;
        this.getArr(
          data,
          "salesAmount",
          { type: "bar", barWidth: "15px" },
          () => {
            console.log();
            this.drawLine();
          }
        );
        this.getArr(
          data,
          "salesAmountRatio",
          {
            type: "line",
            smooth: true,
            yAxisIndex: 1
          },
          () => {
            this.drawLine();
          }
        );
      }
    },
    //	投资收益预算-列表-品牌市场占比
    getPPList() {
      console.log(67890);
      this.$http
        .post(this.GLOBAL.host, {
          method: "getOccupancyTargetOfBrand",
          query: {
            marketId: this.marketId,
            startTime: this.startMonth,
            endTime: this.endMonth
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            console.log(res.data.data);
            let data = res.data.data;
            let category = [];
            let marketShare = [];
            for (let i in data) {
              category.push(data[i].brand);
              marketShare.push((data[i].share * 100).toFixed(2));
            }
            this.categoryArr = category;
            this.marketShareArr = marketShare;
          }
        })
        .catch(error => {});
    },
    getSZL() {
      console.log("hfafidhsofihaiodhfiodhafio");
      //获取市占率
      this.$http
        .post(this.GLOBAL.host, {
          method: "getOccupancyTarget",
          query: {
            marketId: this.marketId
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            console.log(res.data.data);
            let arr = res.data.data;
            let len = 3 - arr.length;
            for (let i = 0; i < len; i++) {
              arr.push({
                marketId: this.marketId,
                marketShare: "",
                salesAmount: "",
                salesCount: "",
                grossProfitMargin: "",
                targetYear: "",
                creator: this.$store.state.user.id
              });
            }
            this.list = arr;
          }
        })
        .catch(error => {});
    },
    save() {
      let cansbmt = 1;
      for (let i = 0; i < 3; i++) {
        this.$refs["ruleForm" + i][0].validate(valid => {
          console.log(valid);
          if (valid) {
            cansbmt *= 1;
          } else {
            console.log("error submit!!");
            cansbmt *= 0;
            return false;
          }
        });
      }
      let list = this.list;
      let year1 = list[1].targetYear - list[0].targetYear;
      let year2 = list[2].targetYear - list[1].targetYear;
      if (cansbmt === 1) {
        if (year1 == 1 && year2 == 1) {
          //新增市占率或修改市占率
          this.$http
            .post(this.GLOBAL.host, {
              method: "addOccupancyTarget",
              data: this.list
            })
            .then(res => {
              if (res.data.code == 200) {
                this.$message({
                  message: "市占率保存成功",
                  type: "success",
                  center: true
                });
                console.log(this.list);
                //刷新页面
                this.getSZL();
              } else {
                this.$message({
                  message: "保存失败",
                  type: "error"
                });
              }
            })
            .catch(error => {});
        } else {
          this.$message.error("年份顺序有误，请输入从小到大的紧邻年份！");
        }
      }
    },
    drawLine() {
      // 绘制图表
      this.chartOption = {
        color: ["#9e92e5", "#fd859a", "#64bef5", "#3fcce1"],
        tooltip: {
          trigger: "axis",
          formatter: function(params) {
            console.log(params);
            let html = params[0].name + "</br>";
            for (let i in params) {
              if (params[i].seriesType == "bar") {
                html +=
                  params[i].marker +
                  params[i].seriesName +
                  ":" +
                  params[i].value +
                  "</br>";
              } else if (params[i].seriesType == "line") {
                let value = "";
                if (params[i].value === undefined) {
                  value = "-";
                } else {
                  value = (params[i].value * 100).toFixed(2) + "%";
                }
                html +=
                  params[i].marker +
                  params[i].seriesName +
                  ":" +
                  value +
                  "</br>";
              }
            }
            return html;
          },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: this.allCountData[2],
          right: 0
        },
        xAxis: [
          {
            type: "category",
            data: this.allCountData[1]
          }
        ],
        yAxis: [
          {
            type: "value",
            name: this.labelClick,
            splitNumber: 5
          },
          {
            type: "value",
            name: "增长率",
            interval: 20,
            axisLabel: {
              // formatter: "{value} %"
              formatter: function(params) {
                console.log(params);
                return params * 100 + "%";
              }
            }
          }
        ],
        series: this.allCountData[0].concat(this.allSalesRatio[0])
      };
    }
  },
  watch: {
    list(e) {
      console.log(e);
    }
  }
};
</script>
<style lang="less">
.income1 {
  .bar-wrap {
    background: #ffffff;
    margin-top: 20px;
    position: relative;
    .bar-btn {
      left: 20px;
      top: 20px;
      z-index: 2;
      display: flex;
      > p {
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 14px;
        border-radius: 2px;
        border: 1px solid #cccccc;
        cursor: pointer;
      }
    }
  }
  .naviga {
    width: 100%;
    height: 35px;
    line-height: 35px;
    padding-left: 5px;
    background-color: white;
    font-size: 14px;
    border-bottom: 2px solid #e3e3e3;
  }
  .el-input {
    margin: 20px 0 0 0 !important;
  }
  .margin-top1 {
    width: 97.65%;
    margin: auto;
    background: #fff;
    > div:nth-child(1) {
      > span {
        line-height: 70px;
      }
      > ul {
        margin-top: 12px;
        border: 5px;
      }

      p {
        text-align: center;
        margin: 0;
        font-size: 12px;
        color: #4d4d4d;
        border-radius: 5px;
        padding: 5px 0;
      }
    }
  }
  .pull-right {
    display: flex;
    margin-top: 10px;
    > span {
      font-size: 14px;
      padding: 0 10px;
      line-height: 30px;
      color: #999999;
    }
    > a:nth-child(2) {
      background: #acc6d3;
      color: #fff;
      border-radius: 5px;
      margin-right: 20px;
      display: inline;
      line-height: 30px;
      padding: 0 10px;
      cursor: pointer;
    }
    > span:nth-child(3) {
      background: #34bfde;
      color: #fff;
      border-radius: 5px;
      margin-right: 20px;
      cursor: pointer;
    }
    .data-month {
      width: 70%;
      border: 1px solid #cccccc;
      display: flex;
      padding-left: 10px;
      height: 50px;
      > span {
        line-height: 50px;
      }
      .el-input {
        width: 40%;
        border: none;
        margin-top: 0px !important;
        display: flex;
        align-items: center;
        .el-input__inner {
          padding: 0;
          text-align: center;
          border: none;
          height: 40px;
          line-height: 40px;
        }
        .el-input__icon {
          display: none;
        }
      }
    }
  }
  .market-share {
    width: 96.3%;
    display: flex;
    margin: auto;
    margin-bottom: 20px;
    > ul:nth-child(1) {
      width: 20%;
      line-height: 40px;
      height: 80px;
      border: 1px solid #e0e0e0;
      > p {
        width: 100%;
        text-align: center;
        margin-bottom: 0;
      }
      > p:nth-child(1) {
        border-bottom: 1px solid #e0e0e0;
        background: #eff7fc;
      }
    }
    > div {
      width: 80%;
      line-height: 40px;
      height: 40px;
      border: 1px solid #e0e0e0;
      border-left: none;
      > ul:nth-child(1) {
        //  border-bottom: none;
        background: #eff7fc;
      }
      > ul {
        font-size: 14px;
        width: 100%;
        text-align: center;
        line-height: 40px;
        height: 40px;
        margin-bottom: 0;
        display: flex;
        border-right: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;
        > p {
          width: 20%;
          height: 40px;
          line-height: 40px;
          text-align: center;
          border-right: 1px solid #e0e0e0;
        }
      }
    }
  }

  .title {
    line-height: 60px;
    width: 10%;
    float: left;
    text-align: center;
    font-size: 14px;
  }
  .title1 {
    float: left;
    width: 30%;
    > div {
      width: 90%;
      margin: auto;
    }
  }
  .el-input {
    margin: 10px 0;
  }
  .margin-top {
    padding: 0;
  }
  .pie {
    height: 220px;
    background: #ffffff;
  }
  .bar {
    background: #ffffff;
    margin-top: 20px;
    position: relative;
    .el-button-group {
      position: absolute;
      left: 20px;
      top: 20px;
    }
  }
  .el-tabs__content {
    padding: 0;
    background: #f6f6f6;
  }
  .top-bar {
    font-size: 14px;
    display: flex;
    align-items: center;

    > img {
      width: 18px;
      height: 18px;
      margin: 0 10px 0 20px;
      vertical-align: center;
    }
    > p:nth-child(2) {
      > span {
        color: #ffc323;
      }
      line-height: 40px;
      margin: 0;
    }
    > p:nth-child(3) {
      padding: 10px;
      margin: 10px 20px;
      background: -o-linear-gradient(left, #3fcce1, #03a9f4);
      background: -moz-linear-gradient(left, #3fcce1, #03a9f4);
      background: -ms-linear-gradient(left, #3fcce1, #03a9f4);
      background: linear-gradient(left, #3fcce1, #03a9f4);
      border-radius: 6px;
      color: #fff;
    }
  }
  .second-bar {
    height: 80px;
    background: #f6f6f6;
    display: flex;
    align-items: center;
  }
  .aaa {
    .el-input__inner {
      border: none;
    }
  }
  .first {
    background: #ffe7eb;
  }
  .second {
    background: #e0f2fd;
  }
  .three {
    background: #dcf6e8;
  }
  .bottomBak {
    background: #e1eff7;
  }
  .priceAnalysis {
    position: absolute;
    left: 20px;
    top: 20px;
    > p {
      float: left;
      border: 1px solid #eeeeee;
      padding: 5px 10px;
    }
  }
}
</style>

